<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }

        h3,
        h4 {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .container {
            width: 500px;
            margin: 0 auto;
        }

        .container:first-child {
            padding: 20px 0;
            background-color: #CBCBCB;
        }

        .container:nth-of-type(2) .title {
            padding: 10px 0;
            background-color: #010101;
            color: #f1f1f1;
        }

        .container:nth-of-type(2) .content {
            background-color: #f1f1f1;
        }

        .container:nth-of-type(2) .content .q-box {
            background-color: #dddddd;
            padding: 3px 0;
        }

        .container:nth-of-type(2) .content .q-opt {
            padding: 6px 0 16px 0;
        }

        .container:nth-of-type(2) .content .q-opt span {
            display: inline-block;
            padding: 0 5px;
            border-radius: 30px;
            margin: 0 15px;
            cursor: pointer;
            /* border: 1px solid transparent; */
        }

        .active {
            border: 1px solid #399C75;
            color: #399C75;
        }

        .submit {
            text-align: center;
            margin-top: 20px;
        }

        button {
            width: 300px;
            height: 50px;
            font-size: 20px;
            background-color: #ddd;
        }

        .container:last-of-type {
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3 class="header"> 在线考试 </h3>
    </div>

    <div class="container">
        <div class="title">
            <h4>一、选择题</h4>
        </div>

        <div class="content">

            <ul id="listId">
                <li>
                    <div class="q-box">1. 1+1 = ？ </div>
                    <div class="q-opt">
                        <span class="item active">A.0</span>
                        <span class="item">B.1</span>
                        <span class="item">C.2</span>
                        <span class="item">D.3</span>
                    </div>
                </li>
            </ul>

        </div>
    </div>

    <div class="container">
        <div class="submit">
            <button class="btn btn-default">提交试卷</button>
        </div>
    </div>

    <div class="container">
        <h4>考试的成绩 <span id="resultId" class="label label-success">0</span> </h4>
    </div>

    <script>
        let data = [{
                "q": "1.唐太宗的名字叫？",
                "options": [{
                        "name": "A.李渊"
                    },
                    {
                        "name": "B.李世民"
                    },
                    {
                        "name": "C.李治"
                    },
                    {
                        "name": "D.武则天"
                    }
                ],
                "score": 20,
                "answer": "B"
            },
            {
                "q": "2.唐太宗把文成公主嫁给吐蕃族首领叫什么？",
                "options": [{
                        "name": "A.囊日论赞"
                    },
                    {
                        "name": "B.朗达玛"
                    },
                    {
                        "name": "C.松赞干布"
                    },
                    {
                        "name": "D.扎西邹巴"
                    }
                ],
                "score": 20,
                "answer": "C"
            },
            {
                "q": "3.1661年,收复了台湾的民族英雄是谁？",
                "options": [{
                        "name": "A.郑成功"
                    },
                    {
                        "name": "B.戚继光"
                    },
                    {
                        "name": "C.林则徐"
                    }
                ],
                "score": 20,
                "answer": "A"
            },
            {
                "q": "4.我国历史上的第一个皇帝是？",
                "options": [{
                        "name": "A.禹"
                    },
                    {
                        "name": "B.姬发"
                    },
                    {
                        "name": "C.秦始皇"
                    }
                ],
                "score": 20,
                "answer": "C"
            },
            {
                "q": "5.被后人尊奉为中华民族“人文始祖”的是？",
                "options": [{
                        "name": "A.黄帝"
                    },
                    {
                        "name": "B.伏羲"
                    },
                    {
                        "name": "C.炎帝"
                    },
                    {
                        "name": "D.以上都是"
                    }
                ],
                "score": 20,
                "answer": "D"
            }
        ];

        class Page {

            /* 在这里补充剩余的代码 */
            constructor(data) {
                this.data = data;
                this.str = "";
                this.score = 0;
            }

            submit() {
                let _btn = document.querySelector("button");
                let sco = document.querySelector("#resultId");
                _btn.onclick = function () {
                    let score = 0;
                    let act = document.querySelectorAll(".active");
                    if (act.length < data.length) {
                        alert("请完成所有的题目!");
                    } else {
                        act.forEach((item, index) => {
                            let awe = item.textContent.split(".")[0];
                            console.log(awe, data[index].answer);
                            if (awe == data[index].answer) {
                                console.log(Number(data[index].score));
                                score += Number(data[index].score);
                            }
                        })
                    }
                    sco.textContent = score;
                }
            }

            bindele() {
                let _li = document.querySelectorAll(".q-opt");
                _li.forEach(item => {
                    item.onclick = function (e) {
                        if (e.target.nodeName == "SPAN") {
                            this.childNodes.forEach(item1 => {
                                item1.classList.remove("active");
                            })
                            e.target.classList.add("active")
                        }
                    }
                })

            }

            init() {
                this.data.forEach(item => {
                    this.str += `<li>
                                    <div class="q-box">${item.q} </div>
                                    <div class="q-opt">`
                    item.options.forEach(element => {
                        this.str += `<span class="item">${element.name}</span>`
                    });
                    this.str += `</div></li>`
                });
                document.querySelector("#listId").innerHTML = this.str;

                this.bindele();
                app.submit();
            }
        }

        const app = new Page(data);
        app.init();
    </script>
</body>

</html>